<script setup lang="ts">
import type { TradeSchema } from "@/types/account.types";
import { useTradeTable } from "./Trade";
import PureTablePlus from "@/components/PureTablePlus/index.vue";

defineOptions({
  name: "trade"
});

const props = withDefaults(
  defineProps<{
    trades: TradeSchema[];
    height?: string | null;
    size?: "small" | "default" | "large";
    compact?: boolean;
  }>(),
  {
    height: null,
    size: undefined,
    compact: false
  }
);

const { tradeColumns, tableSize } = useTradeTable(props.compact);
</script>

<template>
  <div :class="['w-full', props.height ? 'h-full' : '']">
    <PureTablePlus
      row-key="vt_trade_id"
      :size="props.size ?? tableSize"
      :data="trades || []"
      :columns="tradeColumns"
      :default-sort="{ prop: 'event_time', order: 'descending' }"
      search-prop="symbol"
      search-placeholder="搜索合约"
      :height="props.height"
    />
  </div>
</template>
